<template>
  <div>
    <el-table :data="tableData" >
      <el-table-column
          v-for="column in columnList"
          :key="column.prop"
          v-bind="column.columnAttrs"
      >
        <template slot-scope="scope">
          <slot
              v-if="column.type === 'slot'"
              :name="column.slotName"
              :row="scope.row"
          ></slot>
          <components
              v-else
              :row="scope.row"
              :prop="column.prop"
              :config="column"
              :is="`column-${column.type}`"
          ></components>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
const modules = {};
// 将当前目录以及子目录中的index.vue自动注册为组件（require.context是webpack提供的，如果是vite要用vite的方式）
const files = require.context("@/components", true, /index.vue$/);
files.keys().forEach((item) => {
  const name = item.split("/")[1];
  modules[`column-${name}`] = files(item).default;
});
console.log(modules, "modules");

export default {
  name: "CustomTable",
  components: {
    // 组件动态注册
    ...modules,
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columnList: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    console.log(this.tableData,this.columnList)
  }
};
</script>

<style >

.el-table__row .cell {
  margin-left: 68px;
  margin-top: 10px;

}
.el-table__row .cell .el-button{
  margin-right: 10px;
}
</style>